接下來我們講講的動畫功能，CSS 動畫功能可以允許使用者為網頁元素創建動畫效果，使頁面更具互動性和吸引力。以下是 CSS 動畫的主要功能和屬性：
1.@keyframes 規則：@keyframes 規則用於定義動畫的關鍵幀，即動畫從開始到結束過程中的狀態，我們可以在關鍵幀中定義元素的樣式屬性在不同的時間點上的值。
範例程式碼:

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(20px);
  }
  60% {
    transform: translateX(60px);
  }
}

2. animation 屬性：animation 屬性用於將動畫效果應用到元素上。它可以包括以下屬性：

• animation-name：指定要使用的關鍵幀動畫的名稱（上述示例中的 "slide"）。
• animation-duration：指定動畫的持續時間，以秒或毫秒為單位。
• animation-timing-function：指定動畫的時間函數，控制動畫的速度曲線，例如 ease-in、ease-out、linear 等。
• animation-delay：指定動畫開始之前的延遲時間。
• animation-iteration-count：指定動畫的重複次數，可以使用 infinite 無限重複。
• animation-direction：指定動畫的方向，例如 normal（默認）、alternate（來回反復）等。
  範例程式碼:

.box {
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}